<template>
  <section id="errorOrderPage">
    <el-row style="line-height: 30px; padding-bottom: 10px;" class="flex">
      <el-col :span="7" class='flex'>
        <span class="title1" style='white-space:nowrap;padding: 0 3px'>订单号:</span>
        <el-input v-model="form.orderNo" placeholder="请输入订单号"></el-input>
      </el-col>

      <el-col :span="2" style="text-align: left;padding-left: 10px">
        <el-button type="primary" size="small" @click="getErrorOrderList">查询</el-button>
      </el-col>
    </el-row>
    <el-form ref="form" :model="formData" label-width="80px" style="width: 50%;margin: 20px">
      <el-form-item label="用户名">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input v-model="formData.outOrderNo"></el-input>
      </el-form-item>
      <el-form-item label="原因">
        <el-input type="textarea" v-model="formData.reason"></el-input>
      </el-form-item>
      <el-form-item label="参数">
        <el-input type="textarea" :rows="5" v-model="formData.params"></el-input>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-input v-model="formData.createTime"></el-input>
      </el-form-item>


      <el-form-item label="内容">
        <el-input type="textarea" :rows="5" v-model="formData.content"></el-input>
      </el-form-item>

    </el-form>

  </section>
</template>

<script>
  import dateformat from 'dateformat'

  export default {
    data () {
      return {
        formData: {},
        total: 1,
        form: {
          orderNo: ''
        },
        loading: false
      }
    },
    created() {
    },
    methods: {
      getErrorOrderList() {
        this.$api.getErrorOrderList(this.form.orderNo).then(res => {
          this.formData = res.data;
          if (this.formData.createTime) {
            let date = new Date(this.formData.createTime);
            this.formData.createTime = dateformat(date, 'yyyy-mm-dd HH:MM')
          }
          this.$message.success("查询成功")
        })
      },
      handleCurrentChange(val) {
        this.form.pageNumber = val
      }
    }
  }
</script>

<style lang="less">
  #errorOrderPage {
    padding: 10px;
    th {
      text-align: center;
    }
    .flex {
      .el-input__inner {
        height: 25px;
        font-size: 12px;
      }
      .el-input {
        width: 360px;
        display: inline-block;
        margin: 0 8px;
      }
    }

    .title1 {
      font-size: 14px;
    }
  }
</style>
